@import '~/styl/var.styl'

html, body
  height 100%
  margin 0
  padding 0
  width 100%

html:lang(ar), html:lang(ckb), html:lang(dv), html:lang(fa), html:lang(he), html:lang(ps), html:lang(sd), html:lang(ug), html:lang(ur), html:lang(yi)
  p, a, button, select, textarea, input, h1, h2, h3, h4, h5, h6
    direction rtl

body
  flex-direction column
  overflow hidden

body, input, textarea
  background transparent
  font 300 18px / 1.625 s, sans-serif
  text-rendering optimizespeed

form, body
  align-items center
  display flex
  flex-wrap wrap

b
  font-weight 300

p>b, p>strong, th
  font-weight 500

p
  text-wrap pretty

h1, h2, h3, h4, h5, h6
  align-items center
  display flex
  font-family h, sans-serif
  font-variation-settings 'wght' 400, 'BEVL' 30
  font-weight 400
  letter-spacing 1px
  margin 1em 0
  text-wrap balance
  word-spacing 2px

h1
  font-size 32px

h2
  font-size 29px

h3
  font-size 26px

h4
  font-size 23px

h5
  font-size 20px

h6
  font-size 18px

body
  word-spacing 1px

input, textarea
  outline 0
  padding 18px

a
  color a-color
  text-decoration none
  transition all 0.5s

  &:hover
    color hover-color

pre, code
  background #f5fff0
  border 1px dashed #9c5
  font-family c, monospace
  padding 3px 6px

pre
  padding 6px 12px

pre code
  border 0
  padding 0

img
  max-width 100%

blockquote
  margin 0 0 0 22px
  position relative

  &:after
    background var(--svgQ1) 2px 0 / 8px no-repeat
    border-bottom 1px solid #000
    bottom 5px
    content ''
    font-size 25px
    left -25px
    opacity 0.6
    position absolute
    top -3px
    width 10px

  &:before
    background var(--svgVline) 0 0
    bottom 6px
    content ''
    left -21px
    opacity 0.6
    position absolute
    top 5px
    width 1px
